<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>慕课七夕主题</title>
    <link rel="stylesheet" href="css/style3-1.css" />
    <link rel="stylesheet" href="css/pageA3-1.css" />
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/swipe2-3.js"></script>
    <style type="text/css">
      .charector {
        position: absolute;
        left: 6%;
        top: 55%;
        width: 151px;
        height: 291px;
        background: url("http://img.mukewang.com/55ade248000198ae10550582.png") -0px -291px no-repeat;
      }
      .slowWalk {
        /*规定 @keyframes 动画的名称。*/
        -webkit-animation-name: person-slow;
        /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
        -webkit-animation-duration: 950ms;
        /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
        -webkit-animation-iteration-count: infinite;
        /*动画切换的方式是一帧一帧的改变*/
        -webkit-animation-timing-function: steps(1, start);
        -moz-animation-name: person-slow;
        -moz-animation-duration: 950ms;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: steps(1, start)
      }
      /* 普通慢走 */     
      @-webkit-keyframes person-slow {
        0% {
          background-position: -0px -291px;
        }
        25% {
          background-position: -602px -0px;
        }
        50% {
          background-position: -302px -291px;
        }
        75% {
          background-position: -151px -291px;
        }
        100% {
          background-position: -0px -291px;
        }
      }
      @-moz-keyframes person-slow {
        0% {
          background-position: -0px -291px;
        }
        25% {
          background-position: -602px -0px;
        }
        50% {
          background-position: -302px -291px;
        }
        75% {
          background-position: -151px -291px;
        }
        100% {
          background-position: -0px -291px;
        }
      }
      .button {
      	position: fixed;
      	left: 20px;
      	top: 30px;
      }
      button {
      	padding: 5px 10px;
      	outline: none;
      	background-color: #CAE1FF;
      	color: #fff;
      	border: 1px solid #ccc;
      	cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id='content'>
      <ul class='content-wrap'>
        <li>
          <div class="a_background">
            <div class="a_background_top"></div>
            <div class="a_background_middle"></div>
            <div class="a_background_botton"></div>
          </div>
        </li>
        <li> 页面2 </li>
        <li> 页面3 </li>
      </ul>
      <div id="boy" class="charector"></div>
      <div class="button">
        <button>点击开始动画</button>
      </div>
    </div>
    <script type="text/javascript">
      var swipe = Swipe($("#content"));
      // 获取数据
      var getValue = function (className) {
        var $elem = $('' + className + '');
        // 走路的路线坐标
        return {
          height: $elem.height(),
          top: $elem.position().top
        };
      }
      // 路的Y轴
      var pathY = function () {
        var data = getValue('.a_background_middle');
        return data.top + data.height / 2;
      }();
      var $boy = $("#boy");
      var boyHeight = $boy.height();
      // 修正小男孩的正确位置
      $boy.css({
        top: pathY - boyHeight + 25
      });
      //     增加精灵动画
      $('button').click(function () {
        // 增加走路的CSS3关键帧规则
        $boy.addClass('slowWalk');
      });
    </script>
  </body>

</html>